<template>
  <div class="content">
    <div class="headline">评价管理</div>
    <div class="evaContainer">
      <el-table
        v-loading="searchOrderloading"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        :data="SelloutData"
        border
        style="width: 100%"
        empty-text="暂无数据"
      >
        <el-table-column fixed label="店铺" prop="mallCode" width="170">
        </el-table-column>
        <el-table-column fixed prop="orderId" label="订单号" width="250">
        </el-table-column>
        <el-table-column label="实付款" width="170">
          <template slot-scope="scope">
            {{ scope.row.paidAmount / 100 }}
          </template>
        </el-table-column>
        <el-table-column label="评价" width="250">
          <template slot-scope="scope">
            <el-rate
              v-model="scope.row.star"
              show-score
              disabled
              text-color="#ff9900"
              score-template="{value}"
            >
            </el-rate>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看评价</el-button
            >
            <!-- {{ scope.row }} -->
            <el-button
              @click="ConfirmDelivery(scope.row)"
              type="text"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="paging">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <div>
      <el-dialog
        title="订单评价"
        :visible.sync="orderDetailes"
        width="50%"
        :close-on-click-modal="false"
      >
        <!-- <span></span>
        <el-form :inline="true" label-width="80px" :model="detailOrder">
          <el-form-item label="我的评价:">
            <span>{{ detailOrder.eva }}</span>
          </el-form-item>
          <el-form-item label="店铺名称:">
            <span>{{ detailOrder.mallName }}</span>
          </el-form-item>
          <el-form-item label="商品名称:">
            <span>{{ detailOrder.goodsInfo.goodsName }}</span>
          </el-form-item>
          <el-form-item label="商品图片:">
            <img
              :src="detailOrder.goodsInfo.goodsThumbnail"
              alt=""
              width="100px"
              height="100px"
            />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="orderDetailes = false">取 消</el-button>
          <el-button type="primary" @click="orderDetailes = false"
            >确 定</el-button
          >
        </span> -->

        <div class="container">
          <div class="conTitle">
            <h3>店铺名称：{{ evaOrder.mallName }}</h3>
          </div>
          <div class="faContainer">
            <div class="conLeft">
              <div
                class="conLeft-f"
                v-for="(item, idx) in evaOrder.orderDetailesList"
                :key="idx"
              >
                <img
                  :src="item.goodsThumbnail"
                  alt=""
                  width="80px"
                  height="80px"
                />
                <div>
                  <p>{{ item.goodsName }}</p>
                  <p>¥{{ item.price / 100 }}/套</p>
                </div>
              </div>
              <span
                v-if="this.bargain.length > 3"
                @click="showAll = !showAll"
                style="
                  color: #1289ff;
                  text-align: center;
                  cursor: pointer;
                  font-weight: 500;
                "
                >{{ word }}</span
              >
            </div>
            <div class="conRight">
              <div>
                <el-form :inline="true" label-width="80px">
                  <el-form-item label=" 我的评分:">
                    <el-rate
                      v-model="detailOrder.star"
                      show-score
                      disabled
                      text-color="#ff9900"
                      score-template="{value}"
                    >
                    </el-rate>
                  </el-form-item>
                  <el-form-item label="我的评价">
                    <el-input
                      disabled
                      v-model.trim="detailOrder.eva"
                      maxlength="500"
                      show-word-limit
                      type="textarea"
                      :rows="8"
                      :style="{
                        width: '460px',
                        marginLeft: '20px',
                        height: '180px',
                      }"
                    ></el-input>
                  </el-form-item>
                </el-form>
              </div>

              <div>
                <!-- {{ this.$route.query }} -->
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  tModOrderEvaPage,
  tModOrderEvaDetail,
  tModOrderEvaDelete,
  getOrderDetails,
} from "@/api/mallApi/congLinMall";
export default {
  name: "EvaluationManagement",
  data() {
    return {
      searchOrderloading: false,
      pageSize: 10, //,每页显示条数
      currentPage: 1, //分页
      total: 0,
      orderDetailes: false,
      bargain: [],
      evaOrder: {},
      detailOrder: {
        goodsInfo: {},
      },
      SelloutData: [],
    };
  },
  computed: {
    showHandleList() {
      if (this.showAll == false) {
        //收起状态-显示“展示”
        var showList = []; //定义⼀个空数组
        if (this.bargain.length > 3) {
          //控制显⽰前3个
          for (var i = 0; i < 3; i++) {
            showList.push(this.bargain[i]); //将数组的前3条存放到showList数组中
          }
        } else {
          showList = this.bargain; //个数足够显示，不需要再截取
        }
        return showList; //返回当前数组
      } else {
        // 展开状态-显示“收起”
        return this.bargain;
      }
    },
    word() {
      if (this.showAll == false) {
        //对⽂字进⾏处理
        return "展开全部";
      } else {
        return "收起全部";
      }
    },
  },
  mounted() {
    this.tModOrderEvaPage();
  },
  methods: {
    tModOrderEvaPage() {
      let values = { pageNo: this.currentPage, pageSize: this.pageSize };
      tModOrderEvaPage(values).then((res) => {
        this.SelloutData = res.data.rows;
        this.total = res.data.totalRows;
      });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      console.log(this.currentPage);
      this.currentPage = val;
      this.tModOrderEvaPage();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.tModOrderEvaPage();
      console.log(`每页 ${val} 条`);
    },
    ConfirmDelivery(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          tModOrderEvaDelete({ ids: [row.id] });
          this.tModOrderEvaPage();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleClick(row) {
      // console.log("rw", row);
      // this.detailOrder = { ...row };
      // this.SelloutData.eva = row.eva;
      // this.SelloutData.mallName = row.mallName;
      // this.SelloutData.goodsInfo = row.goodsInfo;
      // this.SelloutData.goodsInfo = row.goodsInfo;
      console.log("178", this.detailOrder);
      tModOrderEvaDetail({ id: row.id }).then((res) => {
        this.detailOrder = res.data;
        console.log("bbbb", res);
      });
      getOrderDetails({ orderCode: row.orderCode })
        .then((res) => {
          this.evaOrder = res.data;
          console.log("eva", res);
        })
        .catch((err) => {});
      this.orderDetailes = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 50%;
  border: 2px solid #e0e0e0;
  margin-top: 20px;
  // background: #3c3c3c;
  .conTitle {
    width: 100%;
    height: 70px;
    background: #f8f8f8;
    line-height: 70px;
    font-family: "Source Han Sans CN Bold";
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02px;
    color: #000;
    padding-left: 20px;

    h3 {
      // padding-top: 0px;
      margin-top: 0px;
    }
  }
  .faContainer {
    display: flex;
    .conLeft {
      width: 500px;
      height: 437px;
      border-right: 2px solid #e0e0e0;
      // background: red;
      display: flex;
      flex-direction: column;
      text-align: left;
      padding: 30px 0 0 20px;
      overflow: auto;

      .conLeft-f {
        display: flex;
      }
      p:nth-child(1) {
        margin-left: 15px;
        font-family: "Source Han Sans CN";
        font-weight: 400;
        font-size: 16px;

        color: #000;
      }
      p:nth-child(2) {
        margin-left: 15px;
        font-family: "Source Han Sans CN Bold";
        font-weight: 700;
        font-size: 20px;
        color: #ff6b00;
      }
    }
    .conRight {
      width: 500px;
      height: 400px;
      // background: pink;
    }
  }
}
.el-rate {
  height: 30px;
  line-height: 1;
}
.content {
  height: 1041px;
  background: #fff;

  .headline {
    padding: 0px 0 0 20px;
    height: 70px;
    border-bottom: 2px solid #ebebeb;
    line-height: 70px;
    font-family: "Source Han Sans CN Bold";
    font-weight: 700;
    font-size: 20px;
    color: #3c3c3c;
  }
  .evaContainer {
    padding: 20px 0 0 20px;
  }
}
</style>
